<template>
  <div class="page-wrap">
    <div class="page-content" :style="{ height: contentHei }">
      <div class="img-header">
        <div class="class-title-wrap">
          <div class="class-title">
            <div
              class="class-title-all"
              :class="{ active: allClassText }"
              @click="clickClassText('ready')"
            >
              准备中
            </div>
            <div
              class="class-title-line"
              :class="{ 'line-active': allClassLine }"
            ></div>
          </div>
          <div style="margin-left: 50px" class="class-title">
            <div
              class="class-title-all"
              :class="{ active: myClassText }"
              @click="clickClassText('running')"
            >
              进行中
            </div>
            <div
              class="class-title-line"
              :class="{ 'line-active': myClassLine }"
            ></div>
          </div>
          <div style="margin-left: 50px" class="class-title">
            <div
              class="class-title-all"
              :class="{ active: meClassText }"
              @click="clickClassText('complete')"
            >
              已结束
            </div>
            <div
              class="class-title-line"
              :class="{ 'line-active': meClassLine }"
              @click="clickClassText('complete')"
            ></div>
          </div>
        </div>
        <div
          style="display: flex;justify-content: flex-end;width: 50%"
          v-show="allClassText"
        >
          <Input
            v-model="taskModelInput"
            search
            :placeholder="$t('TestTaskName')"
            @on-search="searchTaskNameBtn"
            @keyup.delete.native="searchTaskNameOnDelname"
            style="width: 150px;"
          />
          <i-select
            v-model="queryType"
            style="margin: 0 15px;width: 150px"
            @on-change="selectTypeChange"
          >
            <i-option value="all">{{ $t('AllTypes') }}</i-option>
            <i-option value="1">{{ '安全技术研究' }}</i-option>
            <i-option value="2">{{ '网络新技术验证' }}</i-option>
            <i-option value="3">{{ '系统测评[内打内]' }}</i-option>
            <i-option value="4">{{ '系统测评[外打内]' }}</i-option>
            <i-option value="5">{{ '安全众测' }}</i-option>
            <i-option value="6">{{ '攻防演练[内/外打内]' }}</i-option>
            <i-option value="7">{{ '攻防演练[内/外打外]' }}</i-option>
            <i-option value="8">{{ '人才培训' }}</i-option>
          </i-select>
          <Button title="refresh" @click="refreshTask" style="height: 32px;"
          ><i class="el-icon-refresh-right"
          /></Button>
        </div>
        <div
          style="display: flex;justify-content: flex-end;width: 50%"
          v-show="myClassText"
        >
          <Input
            v-model="taskModelInput"
            search
            :placeholder="$t('TestTaskName')"
            @on-search="searchTaskNameBtn"
            @keyup.delete.native="searchTaskNameOnDelname"
            style="width: 150px;"
          />
          <i-select
            v-model="queryType"
            style="margin: 0 15px;width: 150px"
            @on-change="selectTypeChange"
          >
            <i-option value="all">{{ $t('AllTypes') }}</i-option>
            <i-option value="1">{{ '安全技术研究' }}</i-option>
            <i-option value="2">{{ '网络新技术验证' }}</i-option>
            <i-option value="3">{{ '系统测评[内打内]' }}</i-option>
            <i-option value="4">{{ '系统测评[外打内]' }}</i-option>
            <i-option value="5">{{ '安全众测' }}</i-option>
            <i-option value="6">{{ '攻防演练[内/外打内]' }}</i-option>
            <i-option value="7">{{ '攻防演练[内/外打外]' }}</i-option>
            <i-option value="8">{{ '人才培训' }}</i-option>
          </i-select>
          <Button title="refresh" @click="refreshTask" style="height: 32px;"
          ><i class="el-icon-refresh-right"
          /></Button>
        </div>

        <div
          style="display: flex;justify-content: flex-end;width: 50%"
          v-show="meClassText"
        >
          <Input
            v-model="taskModelInput"
            search
            :placeholder="$t('TestTaskName')"
            @on-search="searchTaskNameBtn"
            @keyup.delete.native="searchTaskNameOnDelname"
            style="width: 150px;"
          />
          <i-select
            v-model="queryType"
            style="margin: 0 15px;width: 150px"
            @on-change="selectTypeChange"
          >
            <i-option value="all">{{ $t('AllTypes') }}</i-option>
            <i-option value="1">{{ '安全技术研究' }}</i-option>
            <i-option value="2">{{ '网络新技术验证' }}</i-option>
            <i-option value="3">{{ '系统测评[内打内]' }}</i-option>
            <i-option value="4">{{ '系统测评[外打内]' }}</i-option>
            <i-option value="5">{{ '安全众测' }}</i-option>
            <i-option value="6">{{ '攻防演练[内/外打内]' }}</i-option>
            <i-option value="7">{{ '攻防演练[内/外打外]' }}</i-option>
            <i-option value="8">{{ '人才培训' }}</i-option>
          </i-select>
          <Button title="refresh" @click="refreshTask" style="height: 32px;"
          ><i class="el-icon-refresh-right"
          /></Button>
        </div>
      </div>
      <Divider />

      <div
        style="display: flex;justify-content: flex-end;margin-top: 15px"
        v-show="allClassLine"
      >
        <Page
          :total="taskTotal"
          :page-size="taskPageSize"
          :current="taskPage"
          show-total
          show-elevator
          @on-change="taskOnChange"
        />
      </div>

      <div class="table-wrap" :style="{ height: setWrapHei }">
        <div
          style="display: flex;justify-content: flex-end;margin-top: 15px"
          v-show="myClassLine"
        >
          <Page
            :total="taskTotal"
            :page-size="taskPageSize"
            :current="taskPage"
            show-total
            show-elevator
            @on-change="taskOnChange"
          />
        </div>
        <div
          style="display: flex;justify-content: flex-end;margin-top: 15px"
          v-show="meClassLine"
        >
          <Page
            :total="taskTotal"
            :page-size="taskPageSize"
            :current="taskPage"
            show-total
            show-elevator
            @on-change="taskOnChange"
          />
        </div>
        <Table
          :columns="taskCol"
          :data="taskList"
          :loading="taskListLoading"
          style="margin-top: 15px"
        >
        </Table>
      </div>
    </div>
    <!--文档列表A-->
    <Modal
      v-model="decModal"
      width="1000"
      :mask-closable="false"
      :title="taskName"
    >
      <div>
        <Table
          :columns="docCol"
          :data="docList"
          :loading="decListLoading"
        ></Table>
      </div>
      <div slot="footer">
        <Button @click="decModal = false">关闭</Button>
      </div>
    </Modal>

    <!--任务详情-->
    <Modal
      v-model="showTaskDetailPopup"
      class-name="vertical-center-modal"
      scrollable
      title="任务详情"
      ok-text="确定"
      width="1250"
      :mask-closable="false"
      class="creatProModal"
      :footer-hide="true"
      :loading="createProjectTaskModalLoading"
      id="createProject"
      @on-ok="saveProjectData"
      @on-cancel="cancel"
    >
      <Taskdetail
        :task-detail="taskDetail"
        @closePopup="showTaskDetailPopup = false"
      />
    </Modal>

    <!-- 关联工程 场景 -->
    <Modal
      v-model="proModal"
      width="1100"
      class="task-pro-modal"
      :mask-closable="false"
      :loading="saveLinkProLoding"
      :title="$t('AssociatedEngineering')"
    >
      <div>
        <div
          style="display: flex;justify-content: space-between;margin-bottom: 10px;"
        >
          <div>
            <Tag color="primary"
            >{{ boundOrSelectInfo + '：' }}{{ taskData.projectName
              }}<a
                style="text-decoration:underline;"
                :href="
									'/topologyProject/index.html#/topologyDisplay/topologys?projectId=' +
										clickProData.id
								"
                target="_blank"
              >{{ this.clickProData.name }}</a
              ></Tag
            >
            <!--
            <Tag color="primary">{{$t('SelectedScene')+'：'}}<a style="text-decoration:underline;"  :href="'/topologyProject/index.html#/topologyDisplay/processPanel/processControl?projectId='+clickProData.id+'&types=data&sceneId='+chooseSceneData.id" target="_blank">{{this.chooseSceneData.name}}</a></Tag>
            -->
          </div>
          <Input
            v-model.trim="queryProName"
            search
            :placeholder="$t('ProjectName')"
            style="width: 200px"
            @on-enter="queryProBtn"
            @on-search="queryProBtn"
            @on-clear="clearProName"
            @keyup.delete.native="delProBtn"
          />
        </div>
        <Table
          border
          :columns="proCol"
          :data="projectList"
          :loading="proLoading"
          max-height="750"
          @on-expand="expandClick"
        ></Table>
        <div style="display: flex;justify-content: flex-end;margin: 10px 0">
          <Page
            :total="proTotal"
            :page-size="proPageSize"
            :current="proPage"
            show-total
            show-elevator
            @on-change="proChange"
          />
        </div>
      </div>
      <div slot="footer">
        <Button @click="cancelLink">{{ $t('Cancel') }}</Button>
        <Poptip
          confirm
          :title="$t('UnbindInfo')"
          @on-ok="unbindPro"
          @on-cancel="unbindCancel"
        >
          <Button type="error" :disabled="!boundProject">{{
              $t('Unbind')
            }}</Button>
        </Poptip>
        <Button type="primary" :disabled="boundProject" @click="linkPro">{{
            $t('Binding')
          }}</Button>
      </div>
    </Modal>

    <!-- 创建工程对话框   -->
    <Modal
      v-model="createProjectTaskModal"
      title="创建工程"
      ok-text="确定"
      width="800"
      :mask-closable="false"
      class="creatProModal"
      :footer-hide="true"
      :loading="createProjectTaskModalLoading"
      id="createProject"
      @on-ok="saveProjectData"
      @on-cancel="cancel"
    >
      <keep-alive v-if="createProjectTaskModal">
        <crtproj
          v-bind:taskid="taskID"
          @closePopup="createProjectTaskModal = false"
        ></crtproj>
      </keep-alive>
    </Modal>


    <!-- 自动构建对话框   -->
    <Modal
      v-model="autoBuildModal"
      title="自动构建"
      ok-text="确定"
      width="600"
      :mask-closable="false"
      class="creatProModal"
      :footer-hide="true"
      :loading="createProjectTaskModalLoading"
      id="createProject"
      @on-ok="saveProjectData"
      @on-cancel="cancel"
    >
      <keep-alive v-if="autoBuildModal">
        <autobuild
          v-bind:taskid="taskID" v-bind:taskname="taskName" v-bind:tasktype="taskType"
          @closePopup="autoBuildModal = false"
        ></autobuild>
      </keep-alive>
    </Modal>


    <!-- 创建综合演练对话框   -->
    <Modal
      v-model="createMultDrill"
      title="创建综合演练"
      ok-text="确定"
      width=600
      :mask-closable="false" class="creatProModal"
      :footer-hide="true"
      :loading=createProjectTaskModalLoading
      id="createMultDrill"
      @on-ok="saveProjectData"
      @on-cancel="cancel">

      <keep-alive v-if="createMultDrill">
        <multdrill v-bind:taskid="taskID" v-bind:bindPprojectId="projectId" @closePopup="createMultDrill = false"></multdrill>
      </keep-alive>

    </Modal>


    <Drawer
      :title="$t('SceneList')"
      v-model="drawer1"
      class="task-scene-drawer"
      width="720"
      :styles="styles"
    >
      <Table
        border
        :columns="sceneCol"
        :data="sceneList"
        :loading="sceneLoading"
      ></Table>
      <div style="display: flex;justify-content: flex-end;margin: 10px 0">
        <Page
          :total="sceneTotal"
          :page-size="pageSize"
          :current="pageIndex"
          show-total
          show-elevator
          @on-change="sceneChange"
        />
      </div>
    </Drawer>
  </div>
</template>
<script>
import $ from 'jquery';
import cookieUse from '@/libs/cookie.js';
import encryption from '@/libs/encryption.js';
import {
  experList,
  checkProjectExist,
  sceneList,
  unbindPro,
  prepareConfirm,
  bindPro,
  getTaskDetailApi,
  checkWhitePrepareComplete,
  buildContest,
  createComplexExericeTeam,
  setBuildFlag
} from '@/api/new-exper.js';
import crtproj from './crtproj.vue';
import multdrill from './multdrill.vue';
import Taskdetail from './taskDetail.vue';
import autobuild from "./autoBuild.vue";


export default {
  name: 'taskManage',
  components: {Taskdetail, crtproj, multdrill, autobuild},
  data() {
    return {
      //假数据
      untaskId: 'TT43675fdbb046408dece08579100173',
      // 用户信息
      USER_ID: '',
      isRootDesinger: '',
      getToken: '',
      // 页面设置
      fullHeight: document.documentElement.clientHeight,
      fullWidth: document.documentElement.clientWidth,
      contentHei: 'auto',
      setWrapHei: 'auto',
      // 头部切换样式
      allClassLine: true,
      allClassText: true,
      myClassText: false,
      meClassText: false,
      myClassLine: false,
      meClassLine: false,
      // 试验任务
      taskTab: 1,
      taskPage: 1,
      taskPageSize: 10,
      taskTotal: 0,
      taskList: [],
      taskCol: [
        {
          type: 'index',
          width: 55,
          align: 'center',
        },
        {
          title: this.$t('TestTaskName'),
          key: 'taskName',
          align: 'center',
          width: 230,
          render: (h, params) => {
            let text = '';
            if (params.row.taskName) {
              text = params.row.taskName;
            }
            return h(
              'div',
              {
                props: {
                  type: 'info',
                },
                style: {
                  cursor: 'pointer',
                  'margin-right': '5px',
                  'vertical-align': 'middle',
                  color: '#2d8cf0',
                  display: 'inline-block',
                },
                on: {
                  click: () => {
                    if (params.row.type === 8) {
                      // 培训
                      this.goContest(params.row); // 培训就到教学班
                    } else {
                      if (
                        params.row.projectId === undefined ||
                        params.row.projectId === ''
                      ) {
                        this.$Message.info({
                          content: '该任务没有绑定工程',
                          duration: 3,
                        });
                      } else {
                        checkProjectExist(params.row.projectId)
                          .then((res) => {
                            if (res.data.code === 1 && res.data.data.exist) {
                              this.goProjectTopo(params.row);
                            } else {
                              this.$Message.info({
                                content: '该工程不存在',
                                duration: 3,
                              });
                            }
                          })
                          .catch((err) => {
                            console.log(err);
                          });
                      }
                    }
                  },
                },
              },
              text
            );
          },
        },
        {
          title: this.$t('Creator'),
          key: 'creatorName',
          align: 'center',
          width: 130,
          render: (h, params) => {
            let text = '';
            if (params.row.creatorName) {
              text = params.row.creatorName;
            } else {
              text = params.row.creator;
            }
            return h('div', text);
          },
        },
        {
          title: this.$t('Status'),
          key: 'status',
          align: 'center',
          width: 100,
          render: (h, params) => {
            let text = this.$options.filters.filterStatus(params.row.status);
            return h('div', text);
          },
        },
        {
          title: this.$t('Type'),
          key: 'type',
          align: 'center',
          width: 160,
          render: (h, params) => {
            let text = this.$options.filters.filterType(params.row.type);
            return h('div', text);
          },
        },
        {
          title: this.$t('TaskDetail'),
          key: 'taskDec',
          align: 'center',
          width: 140,
          render: (h, params) => {
            return h(
              'Button',
              {
                props: {
                  type: 'info',
                },
                on: {
                  click: () => {
                    this.showTaskDetail(params.row);
                  },
                },
              },
              this.$t('Details')
            );
          },
        },
        {
          title: this.$t('Desc'),
          key: 'description',
          align: 'center',
          width: 270,
          ellipsis: true,
          tooltip: true,
        },
        {
          title: '创建时间',
          key: 'createTime',
          align: 'center',
          width: 155
        },
        {
          title: '场景',
          key: 'contestName',
          align: 'center',
          width: 290,
          render: (h, params) => {
            return h(
              'a',
              {
                attrs: {
                  title: params.row.name,
                },
                on: {
                  click: () => {
                    this.goContest(params.row);
                  },
                },
              },
              params.row.contestName
            );
          },
        },
        {
          title: '目标网络',
          key: 'projectName',
          align: 'center',
          width: 320,
          render: (h, params) => {
            return h(
              'a',
              {
                attrs: {
                  title: params.row.name,
                },
                on: {
                  click: () => {
                    checkProjectExist(params.row.projectId)
                      .then((res) => {
                        if (res.data.code === 1 && res.data.data.exist) {
                          this.goTopo(params.row.projectId);
                        } else {
                          this.$Message.info({
                            content: '该工程不存在',
                            duration: 3,
                          });
                        }
                      })
                      .catch((err) => {
                        console.log(err);
                      });
                  },
                },
              },
              params.row.projectName
            );
          },
        },

        {
          title: this.$t('Action'),
          key: 'action',
          align: 'left',
          width: 380,
          render: (h, params) => {
            // 根据状态判断是否可编辑，后面的编辑开关需要于此and
            let editFlagOfStatus = params.row.status < 3;

            let editFlag = true;

            if (
              params.row.type === 5 ||
              params.row.type === 7 ||
              params.row.type === 8 ||
              params.row.secondModeType === 1 ||
              params.row.secondModeType === 6
            ) {
              editFlag = false;
            }
            editFlag = editFlag && editFlagOfStatus;
            let createProjFlag = editFlag; // 创建工程flag



            // 是否已经确认过
            let preparConfirm = params.row.preparConfirm === 1;
            let confirmInfo =
              preparConfirm || !editFlagOfStatus
                ? '已完成准备确认'
                : '准备完成确认';

            // 工程是否已构建
            let buildFlag = params.row.buildFlag === 1;
            if (params.row.secondModeType === 4 || params.row.secondModeType === 3) { // 云化不需要自动构建
                buildFlag = true;
            }

            if(params.row.secondModeType === 7) {  // 综合演练不需自动构建，及创建工程
              buildFlag = true
              createProjFlag = false;
            }

            return h(
              'a',
              {
                attrs: {},
                style: {
                  display: 'flex',
                  'justify-content': 'flex-start',
                  'align-items': 'center',
                  color: '#2f70ff',
                },
              },
              [
                h(
                  'div',
                  {
                    on: {
                      click: () => {
                        if (editFlag) {
                          if (params.row.secondModeType === 7){ // 7是综合演练
                            this.openMultDrillDlg(params.row);
                          }else {
                            this.relationPro(params.row);
                          }
                        }
                      },
                    },
                    style: {
                      'margin-right': '20px',
                    },
                  },
                  [
                    h('img', {
                      attrs: {
                        src: editFlag
                          ? require('../../assets/globalIcon/ration.png')
                          : require('../../assets/globalIcon/dis-ration.png'),
                      },
                      style: {
                        cursor: editFlag ? 'pointer' : 'not-allowed',
                        'margin-right': '2px',
                        'vertical-align': 'middle',
                        width: '16px',
                        height: '16px',
                        display: 'inline-block',
                      },
                    }),
                    h(
                      'span',
                      {
                        style: {
                          cursor: editFlag ? 'pointer' : 'not-allowed',
                          color: editFlag ? '#2d8cf0' : '#999',
                        },
                      },
                      '指派'
                    ),
                  ]
                ),

                h(
                  'div',
                  {
                    on: {
                      click: () => {
                        if (createProjFlag) {
                          this.creatProBtn(params.row);
                        }
                      },
                    },
                    style: {
                      'margin-right': '20px',
                    },
                  },
                  [
                    h('img', {
                      attrs: {
                        src: createProjFlag
                          ? require('../../assets/globalIcon/modify.png')
                          : require('../../assets/globalIcon/dis-modify2.png'),
                      },
                      style: {
                        cursor: createProjFlag ? 'pointer' : 'not-allowed',
                        'margin-right': '2px',
                        'vertical-align': 'middle',
                        width: '16px',
                        height: '16px',
                        display: 'inline-block',
                      },
                    }),
                    h(
                      'span',
                      {
                        style: {
                          cursor: createProjFlag ? 'pointer' : 'not-allowed',
                          color: createProjFlag ? '#2d8cf0' : '#999',
                        },
                      },
                      '创建工程'
                    ),
                  ]
                ),

                h(
                  // 'div',
                  // {
                  //   on: {
                  //     click: () => {
                  //       if (!buildFlag) {
                  //         this.autoBuild(params.row);
                  //       }
                  //     },
                  //   },
                  //   style: {
                  //     'margin-right': '20px',
                  //   },
                  // },

                  'Poptip',
                  {
                    props: {
                      confirm: true,
                      'ok-text': buildFlag ? '关闭' : '确定',
                      'cancel-text': buildFlag ? '' : '取消',
                      // width: 280,
                      type: 'error',
                      size: 'large',
                      title: buildFlag
                        ? '该任务已经构建'
                        : '是否确定构建该任务?',
                      transfer: true,
                    },
                    style: {
                      marginLeft: '0px',
                      marginRight: '20px',
                    },
                    on: {
                      'on-ok': () => {
                        if (!buildFlag) {
                          this.buildContest(params.row);
                        }
                      },
                    },
                  },

                  [
                    h('img', {
                      attrs: {
                        src: !buildFlag
                          ? require('../../assets/scene/switch-network.png')
                          : require('../../assets/scene/dis-switch-network.png'),
                      },
                      style: {
                        cursor: !buildFlag ? 'pointer' : 'not-allowed',
                        'margin-right': '2px',
                        'vertical-align': 'middle',
                        width: '16px',
                        height: '16px',
                        display: 'inline-block',
                      },
                    }),
                    h(
                      'span',
                      {
                        style: {
                          cursor: !buildFlag ? 'pointer' : 'not-allowed',
                          color: !buildFlag ? '#2d8cf0' : '#999',
                        },
                      },
                      '自动构建'
                    ),
                  ]
                ),

                h(
                  'Poptip',
                  {
                    props: {
                      confirm: true,
                      'ok-text': preparConfirm ? '关闭' : '确定',
                      'cancel-text': preparConfirm ? '' : '取消',
                      width: 280,
                      type: 'error',
                      size: 'large',
                      title: preparConfirm
                        ? '该任务已经确认'
                        : '准备完成确认是白方向黄方系统通知白方的准备工作已完成，操作前请确保白方的比赛准备工作已完成。您是否确认?',
                      transfer: true,
                    },
                    style: {
                      marginLeft: '0px',
                    },
                    on: {
                      'on-ok': () => {
                        if (!preparConfirm) {
                          this.matchConfirmation(params.row);
                        }
                      },
                    },
                  },
                  [
                    h('img', {
                      attrs: {
                        src:
                          preparConfirm || !editFlagOfStatus
                            ? require('../../assets/mainPage/train-icon-def-s.png')
                            : require('../../assets/mainPage/train-icon-active-s.png'),
                      },
                      style: {
                        cursor: editFlagOfStatus ? 'pointer' : 'not-allowed',
                        'margin-right': '2px',
                        'vertical-align': 'middle',
                        width: '16px',
                        height: '16px',
                        display: 'inline-block',
                      },
                    }),
                    h(
                      'span',
                      {
                        style: {
                          cursor: editFlagOfStatus ? 'pointer' : 'not-allowed',
                          color: preparConfirm ? '#999' : '#2d8cf0',
                        },
                      },
                      confirmInfo
                    ),
                  ]
                ),



              ]
            );
          },
        },
      ],
      taskListLoading: false,
      searchName: '',
      queryType: 'all',
      queryStatus: 'all',
      taskModelInput: '',
      taskData: {},
      // 任务需求文档
      taskID: '',
      projectId: '',
      taskName: '',
      taskType: '',
      decModal: false,
      showTaskDetailPopup: false,
      decListLoading: false,
      docList: [],
      docCol: [
        {
          type: 'index',
          width: 60,
          align: 'center',
        },
        {
          title: this.$t('DocumentName'),
          key: 'title',
          align: 'center',
        },
        {
          title: this.$t('FileName'),
          key: 'fileName',
          align: 'center',
        },
        {
          title: this.$t('FileType'),
          key: 'fileType',
          align: 'center',
        },
        {
          title: this.$t('uploader'),
          key: 'aa',
          align: 'center',
          render: (h, params) => {
            let text = '';
            if (params.row.creatorName) {
              text = params.row.creatorName;
            } else {
              text = params.row.creator;
            }
            return h('div', text);
          },
        },
        {
          title: this.$t('UploadTime'),
          key: 'fileTime',
          align: 'center',
          sortable: true,
        },
        {
          title: this.$t('Download'),
          key: 'down',
          align: 'center',
          render: (h, params) => {
            return h(
              'Button',
              {
                props: {
                  type: 'info',
                },
                on: {
                  click: () => {
                    this.downDocFile(params.row);
                  },
                },
              },
              this.$t('Download')
            );
          },
        },
      ],

      // 创建工程
      createProjectTaskModal: false,
      createProjectTaskModalLoading: true,
      // 创建综合演练
      createMultDrill: false,
      // 自动构建对话框
      autoBuildModal: false,

      // 关联工程
      echoId: '',
      isBind: true,
      proModal: false,
      boundProject: false, // 是否已经绑定了工程
      boundOrSelectInfo: this.$t('SelectedProject'),
      proPage: 1,
      proPageSize: 10,
      projectList: [],
      currentChoosePro: '',
      proCol: [
        {
          title: this.$t('Select'),
          key: 'id',
          width: 73,
          align: 'center',
          render: (h, params) => {
            let id = params.row.id;
            let flag = false;
            if (this.currentChoosePro === id) {
              flag = true;
            } else {
              flag = false;
            }
            let self = this;
            return h('div', [
              h('Radio', {
                props: {
                  value: flag,
                  disabled: this.boundProject,
                },
                on: {
                  'on-change': () => {
                    self.currentChoosePro = id;
                    this.clickSelectPro(params.row);
                  },
                },
              }),
            ]);
          },
        },
        {
          title: this.$t('ProjectName'),
          width: 210,
          key: 'name',
          align: 'center',
          render: (h, params) => {
            return h(
              'a',
              {
                style: {
                  'white-space': 'pre',
                },
                on: {
                  click: () => {
                    this.goTopo(params.row.id);
                  },
                },
              },
              params.row.name
            );
          },
        },
        {
          title: 'ID',
          width: 150,
          key: 'id',
          align: 'center',
        },
        {
          title: this.$t('Status'),
          width: 90,
          key: 'statusCHName',
          align: 'center',
        },
        {
          title: this.$t('vmNum'),
          width: 100,
          key: 'vmCount',
          align: 'center',
          render: (h, params) => {
            let num = 0;
            num = params.row.vmCount;
            return h('div', num);
          },
        },
        {
          title: this.$t('Creator'),
          key: 'creatorName',
          align: 'center',
        },
        {
          title: this.$t('Desc'),
          width: 200,
          key: 'description',
          align: 'center',
        },
        {
          title: this.$t('CTime'),
          width: 150,
          key: 'created',
          align: 'center',
        },
      ],
      proTotal: 0,
      proLoading: false,
      clickProData: {},
      saveLinkProLoding: false,
      // 场景
      echoSceneId: '',
      currentChooseScene: '',
      drawer1: false,
      styles: {
        height: 'calc(100% - 55px)',
        overflow: 'auto',
        paddingBottom: '53px',
        position: 'static',
      },
      sceneList: [],
      sceneCol: [
        {
          title: this.$t('Select'),
          key: 'id',
          width: 70,
          align: 'center',
          render: (h, params) => {
            let id = params.row.id;
            let flag = false;
            if (this.currentChooseScene === id) {
              flag = true;
            } else {
              flag = false;
            }
            let self = this;
            return h('div', [
              h('Radio', {
                props: {
                  value: flag,
                },
                on: {
                  'on-change': () => {
                    self.currentChooseScene = id;
                    this.chooseScene(params.row);
                  },
                },
              }),
            ]);
          },
        },
        {
          title: this.$t('Name'),
          key: 'name',
          align: 'center',
          render: (h, params) => {
            return h(
              'a',
              {
                style: {
                  'white-space': 'pre',
                },
                on: {
                  click: () => {
                    this.goTopoScene(params.row);
                  },
                },
              },
              params.row.name
            );
          },
        },
        {
          title: this.$t('Creator'),
          key: 'creatorName',
          align: 'center',
        },
        {
          title: this.$t('Type'),
          key: 'type',
          align: 'center',
        },
        {
          title: this.$t('Status'),
          key: 'status',
          align: 'center',
        },
        {
          title: this.$t('Desc'),
          key: 'description',
          align: 'center',
        },
        {
          title: this.$t('CTime'),
          key: 'created',
          align: 'center',
        },
      ],
      pageIndex: 1,
      pageSize: 10,
      sceneTotal: 0,
      sceneLoading: false,
      chooseSceneData: {},
      // 试验列表B
      experBName: '',
      experBtype: 'all',
      experBStatus: 'all',
      // 搜索工程
      queryProName: '',
      topoid: 'Jbd2ac7522be4963950a0d3045176dd0',
      taskDetail: {},
    };
  },
  computed: {},
  watch: {
    // 在关闭创建工程的对话框时刷新一下任务列表
    createProjectTaskModal() {
      if (!this.createProjectTaskModal) {
        this.getTaskList();
      }
    },

    // 在关闭创建综合演练对话框时刷新一下任务列表
    createMultDrill(){
      if(!this.createMultDrill){
        this.getTaskList();
      }
    },

    taskPageSize() {
      this.getTaskList();
    },
  },
  filters: {
    filterType(type) {
      // 1:安全技术研究.2:网络新技术验证.3:系统测评[内打内].4:系统测评[外打内].5:安全众测.6:攻防演练[内/外打内].7:攻防演练[内/外打外]8:人才培训
      switch (type) {
        case 1:
          return '安全技术研究';
          break;
        case 2:
          return '网络新技术验证';
          break;
        case 3:
          return '系统测评[内打内]';
          break;
        case 4:
          return '系统测评[外打内]';
          break;
        case 5:
          return '安全众测';
          break;
        case 6:
          return '攻防演练[内/外打内]';
          break;
        case 7:
          return '攻防演练[内/外打外]';
          break;
        case 8:
          return '人才培训';
          break;
        default:
          return '其它';
      }
    },

    filterStatus(status) {
      switch (status) {
        case 0:
          return '准备中';
          break;
        case 1:
          return '目标网络准备完成';
          break;
        case 2:
          return '全部准备完成';
          break;
        case 3:
          return '进行中';
          break;
        case 4:
          return '暂停中';
          break;
        case 5:
          return '已结束';
          break;
        default:
          return '';
      }
    },
  },
  created() {
    // 获取用户id
    let November = sessionStorage.getItem('November');
    November = JSON.parse(encryption.SelfUseDecrypt(November));
    this.USER_ID = November.userId;
    this.isRootDesinger = November.isRootDesinger;
    this.getToken = cookieUse.getCookie('desig-token') || '';
    this.getTaskDetail();
  },
  mounted() {
    this.setStyle();
    $('.page-wrap .ivu-divider-horizontal').css({
      margin: 0,
    });
    window.onresize = () => {
      this.setStyle();
    };
    // 试验任务列表
    this.getTaskList(this.taskPage);
  },

  methods: {
    matchConfirmation(params) {
      localStorage.setItem('matchConfirm', true);
      // action 响应动作：1.想定下发,2.开始,3.暂停,4.恢复,5.停止,6.资源释放，7.想定修改下发
      let param = {
        taskId: params.taskId,
        action: 1,
      };

      // 校验是否白方准备完成
      checkWhitePrepareComplete(params.taskId)
        .then((res) => {
          console.log(res.data)
          if (res.data.code === 1) {
            prepareConfirm(param)
              .then((res) => {
                this.$Message.info({
                  content: '准备完成已确认',
                  duration: 3,
                });
                this.getTaskList();
              })
              .catch((err) => {
                console.log(err);
              });

          }else {
            this.$Message.info({
              content: res.data.message,
              duration: 3,
            });
          }
        }).catch((err)=> {

      });

    },

    creatProBtn(row) {
      this.taskID = row.taskId;
      this.createProjectTaskModal = true;
    },

    // 自动构建比赛
    autoBuild(row) {
      this.taskID = row.taskId;
      this.taskName = row.taskName;
      this.taskType = row.type;
      this.autoBuildModal = true;
    },

    saveProjectData() {},
    cancel() {
      this.createProjectTaskModal = false;
    },

    goContest(params) {
      if (params.deployStatus !== 3 && params.secondModeType !== 5) {
        this.$Message.info({
          content: '该任务场景未部署完成，不能进入场景页面',
          duration: 3,
        });
        return;
      }

      let path;
      if (params.secondModeType === 1) {
        // CTF
        path = '/ctfContestDetail';
      } else if (params.secondModeType === 2) {
        // 护网
        path = '/hwDrillDetail';
      } else if (params.secondModeType === 3) {
        // 众测
      } else if (params.secondModeType === 4) {
        // 云化
      }else if (params.secondModeType === 5) {
        // 培训
        path = '/class';
      }else if(params.secondModeType === 6){
        // 攻防赛
        path = '/awdContestDetail'
      }else if(params.secondModeType === 7 ){
         // 综合演练
        path = '/multipleDrillDetail';
      } else {
        this.$Message.info({
          content: '未找到该任务类型的场景',
          duration: 5,
        });
        return;
      }

      if (path) {
        this.$router.push({
          path: path,
          query: {
            id: params.contestId, //场景id
            prjid: params.projectId, //工程id
            name: params.contestName,
            page: 1,
          },
        });
      }
    },

    // 显示工程topo
    goProjectTopo(params) {
      window.openTrain(
        `/TopoProject/index.html#/topologyDisplay/topologys?projectId=${params.projectId}`
      );
    },
    // 设置高度
    setStyle() {
      window.fullHeight = document.documentElement.clientHeight;
      window.fullWidth = document.documentElement.clientWidth;
      this.fullHeight = window.fullHeight;
      this.fullWidth = window.fullWidth;
      this.contentHei = this.fullHeight - 60 + 'px'; // 80是头部高度  60是上下padding
      this.setWrapHei = this.fullHeight - 80 - 60 + 'px';
      let hei = this.fullHeight - 80 - 60 - 60;
      this.taskPageSize = Math.max(1, Math.floor(hei / 45) - 3);
    },

    // 头部的切换
    clickClassText(type) {
      if (type === 'ready') {
        this.allClassLine = true;
        this.allClassText = true;
        this.myClassText = false;
        this.myClassLine = false;
        this.meClassText = false;
        this.meClassLine = false;
        this.taskPage = 1;
        this.taskTab = 1;
        this.taskModelInput = '';
        this.queryType = 'all';
        this.getTaskList();
      } else if (type === 'running') {
        this.allClassLine = false;
        this.allClassText = false;
        this.myClassText = true;
        this.myClassLine = true;
        this.meClassText = false;
        this.meClassLine = false;
        this.taskPage = 1;
        this.taskTab = 2;
        this.taskModelInput = '';
        this.queryType = 'all';
        this.getTaskList();
      } else if(type === 'complete'){
        this.allClassLine = false;
        this.allClassText = false;
        this.myClassText = false;
        this.myClassLine = false;
        this.meClassText = true;
        this.meClassLine = true;
        this.taskPage = 1;
        this.taskTab = 3;
        this.taskModelInput = '';
        this.queryType = 'all';
        this.getTaskList();
      }
    },

    // 试验任务列表
    getTaskList() {
      let status = 1;
      if (this.taskTab === 1) {
        status = 1;
      } else if (this.taskTab === 2) {
        status = 2;
      } else if (this.taskTab === 3) {
        status = 3;
      } else {
        status = 1;
      }

      let params = {
        order: 'desc',
        sortBy: 'createTime',
        status: status,
        pageIndex: this.taskPage,
        pageSize: this.taskPageSize,
      };
      if (this.queryType != 'all') {
        params.type = parseInt(this.queryType);
      }
      if (this.queryStatus != 'all') {
        params.status = parseInt(this.queryStatus);
      }
      if (this.taskModelInput != '') {
        params.name = $.trim(this.taskModelInput);
      }
      this.taskListLoading = true;
      this.taskList = [];
      this.taskTotal = 0;
      experList(params)
        .then((res) => {
          console.log(res);
          if (res.data.code === 1) {
            this.taskList = res.data.data.list;
            this.taskTotal = res.data.data.count;
            // for(let i=0;i<this.taskList.length;i++){
            //   this.queryReady(this.taskList[i].taskId,i)
            // }
          }
          this.taskListLoading = false;
        })
        .catch((err) => {
          this.taskListLoading = false;
          console.log(err);
        });
    },

    taskOnChange(val) {
      this.taskPage = val;
      this.getTaskList();
    },
    selectTypeChange() {
      this.taskPage = 1;
      this.getTaskList();
    },
    selectStatusChange() {
      this.taskPage = 1;
      this.getTaskList();
    },
    searchTaskNameBtn() {
      this.taskPage = 1;
      this.getTaskList();
    },

    searchTaskNameOnDelname() {
      if ($.trim(this.taskModelInput) === '') {
        this.getTaskList();
      }
    },

    refreshTask() {
      this.queryType = 'all';
      this.queryStatus = 'all';
      this.taskModelInput = '';
      this.getTaskList();
    },


    // 文档列表
    showTaskDetail(row) {
      this.taskID = row.taskId;
      this.taskName = row.taskName;
      this.showTaskDetailPopup = true;
      this.getTaskDetail(row.taskId);
    },

    /**
     * 获取任务详情
     * @param {string} taskId
     */
    getTaskDetail: function(taskId) {
      getTaskDetailApi(taskId)
        .then((res) => {
          if (res.data.code === 1) {
            const { data } = res.data;
            this.taskDetail = data;
          } else {
            this.$message.error(res.data.message);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    downDocFile(row) {
      let downloadURL = `${this.baseURL}/nsrep-trial-distributed/task/downLoadConfigFile?minioPath=${row.filePath}`;
      if (this.allClassLine) {
        //      let downloadURL = `/api/trial/doc/download/${row.fileId}?fileName=${row.fileName}`;
        window.openTrain(downloadURL);
      } else {
        window.openTrain(downloadURL);
      }
    },

    // 关联工程
    relationPro(row) {
      this.boundProject = row.projectId !== undefined && row.projectId !== '';
      this.proModal = true;
      this.taskData = row;
      this.currentChoosePro = '';
      this.clickProData = {};
      this.chooseSceneData = {};
      // 获取工程列表
      this.getProjectList();
    },

    // 打开创建综合演练对话框
    openMultDrillDlg(row){
      this.taskID = row.taskId
      this.projectId = row.projectId
      this.createMultDrill = true
    },

    // 工程列表
    getProjectList() {
      // 是否是单位管理员
      let enableAll = '';
      let creator = '';
      let name = '';
      if (this.isRootDesinger) {
        enableAll = `&enableAll=true`;
      } else {
        // creator = `&creator=${this.USER_ID}`
      }
      if (this.queryProName) {
        name = `&projectName=${this.queryProName}`;
      }
      //  this.axios.get(`${this.baseURL}/topo-edit/projects?pageIndex=${this.proPage}&pageSize=${this.proPageSize}&order=desc${creator}&${enableAll}${name}`)
      this.axios
        .get(
          `${this.baseURL}/nsrep-trial-distributed/whitetask/unboundProjects?pageIndex=${this.proPage}&pageSize=${this.proPageSize}&order=desc&${name}`
        )
        .then((res) => {
          if (res.data.code === 1) {
            let attribute = res.data.data;
            let items = attribute.items;
            items = attribute.items;
            this.proTotal = attribute.total;
            for (let i = 0; i < items.length; i++) {
              items[i]._expanded = false;
            }
            this.projectList = items;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    proChange(val) {
      this.proPage = val;
      this.getProjectList();
    },
    queryProBtn() {
      this.getProjectList();
    },
    clearProName() {
      this.queryProName = '';
      this.getProjectList();
    },

    delProBtn() {
      if (this.queryProName === '') {
        this.getProjectList();
      }
    },

    // 选中工程
    clickSelectPro(val) {
      this.clickProData = val;
      this.currentChooseScene = '';
      //  this.drawer1 = true
      this.chooseSceneData = {};
      //   this.getSceneData()
    },
    expandClick(row, status) {
      let id = row.id;
      if (status) {
        for (let i = 0; i < this.projectList.length; i++) {
          this.projectList[i]._expanded = false;
          if (this.projectList[i].id === id) {
            this.projectList[i]._expanded = true;
          }
        }
      }
    },
    // 选择场景
    getSceneData() {
      let params = {
        pageIndex: this.pageIndex,
        pageSize: this.pageSize,
        projectId: this.clickProData.id,
        order: 'desc',
        property: 'created',
      };
      this.sceneLoading = true;
      sceneList(params)
        .then((res) => {
          console.log(res);
          if (res.data.code === 1) {
            this.sceneList = res.data.data.items;
            this.sceneTotal = res.data.data.total;
          }
          this.sceneLoading = false;
        })
        .catch((err) => {
          this.sceneLoading = false;
          console.log(err);
        });
    },
    sceneChange(val) {
      this.pageIndex = val;
      this.getSceneData();
    },
    chooseScene(val) {
      this.chooseSceneData = val;
    },
    // 关联
    linkPro() {
      let params = {
        projectId: this.clickProData.id,
        projectName: this.clickProData.name,
        processTestId: this.chooseSceneData.id,
        taskId: this.taskData.taskId,
        taskName: this.taskData.taskName,
      };
      if (!params.projectId || !params.projectName) {
        this.$Message.info({
          content: this.$t('PleaseChooseProject'),
          duration: 3,
        });
        return false;
      }

      this.saveLinkProLoding = true;
      bindPro(params)
        .then((res) => {
          if (res.data.code === 1) {
            this.proModal = false;
            this.$Message.success({
              content: this.$t('Success'),
              duration: 3,
            });
            this.getTaskList();
          } else {
            this.$Message.error({
              content: res.data.message,
              duration: 3,
            });
          }
          this.saveLinkProLoding = false;
        })
        .catch((err) => {
          console.log(err);
          this.saveLinkProLoding = false;
          this.$Message.error(this.$t('ServerVolid'));
        });
    },
    cancelLink() {
      this.currentChoosePro = '';
      this.taskData = {};
      this.clickProData = {};
      this.chooseSceneData = {};
      this.proModal = false;
    },
    // 解除绑定
    unbindPro() {
      this.saveLinkProLoding = true;
      let params = {
        taskId: this.taskData.taskId,
        projectId: this.clickProData.id,
      };
      unbindPro(params)
        .then((res) => {
          if (res.data.code === 1) {
            this.proModal = false;
            this.taskData = {};
            this.chooseSceneData = {};
            this.clickProData = {};
            this.echoSceneId = '';
            this.currentChooseScene = '';
            this.echoId = '';
            this.currentChoosePro = '';
            this.$Message.success({
              content: res.data.message,
              duration: 3,
            });
            this.getTaskList();
          } else {
            this.$Message.info({
              content: res.data.message,
              duration: 3,
            });
          }
          this.saveLinkProLoding = false;
        })
        .catch((err) => {
          console.log(err);
          this.saveLinkProLoding = false;
        });
    },
    unbindCancel() {},


    goTopo(projectId) {
      window.openTrain(
        `/jjzzTopo/index.html#/ProjectViews?projectId=${projectId}`
      );
    },
    goTopoScene(row) {
      window.openTrain(
        `/topologyProject/index.html#/topologyDisplay/processPanel/processControl?projectId=${this.clickProData.id}&types=data&sceneId=${row.id}`
      );
    },

    // 构建比赛，相当于黄方下发任务
    buildContest(row){
      this.taskID = row.taskId;
      this.taskName = row.taskName;
      this.taskType = row.type;

      let taskid = this.taskID
      let tasktype = this.taskType
      let taskname = this.taskName

      if (taskid !== undefined && taskid != null){
        buildContest(taskid)
          .then((res) => {
            console.log("buildContest return value: ")
            console.log(res)
            if (res.data.code === 1) {
              if (tasktype === 6){  // 综合演练类型，需要调用综合演练接口部署人员
                console.log("综合演练下发成功，taskid=" + taskid)
                createComplexExericeTeam(taskid);
              }
              // 设置已构建标识,buildFlag = 1 表示已构建，为0或没有buildFlag则是未构建
              setBuildFlag(taskid,1)
              this.$Message.info({
                content: '构建任务操作完成， taskid=' + taskid ,
                duration: 3,
              });

            } else {
              this.$Message.info({
                content: '构建比赛失败, taskName=' + taskname + ", 错误原因：" + res.data.message,
                duration: 5,
              });
            }
          })
          .catch((err) => {
            console.log(err);
          });
      }else {
        this.$Message.info({
          content: '构建比赛参数错误， taskid=' + taskid ,
          duration: 3,
        });
      }
    },


  },
};
</script>
<style scoped>
.page-wrap {
  padding: 30px;
}
.page-content {
  background-color: #fff;
  border-radius: 10px;
}
.img-header {
  display: flex;
  justify-content: space-between;
  padding: 20px 30px 0 30px;
}
.table-wrap {
  padding: 1px 30px;
}
.class-title-wrap {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.class-title {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.class-title-all {
  font-size: 16px;
  cursor: pointer;
  color: var(--default-color-level2);
}
.active {
  color: var(--default-color);
  font-size: 20px;
  font-weight: 600;
}
.class-title-line {
  background-color: transparent;
  height: 3px;
  border-radius: 1px;
  width: 50px;
  margin: 10px 0 3px 0;
}
.line-active {
  background-color: var(--default-color);;
}
.ivu-table {
  font-size: 20px !important;
}
.table-wrap {
  overflow-x: auto;
}
.table-wrap::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 8px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 10px;
}
.table-wrap::-webkit-scrollbar-thumb {
  /*滚动条里面小方块样式*/
  border-radius: 5px;
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: rgba(209, 209, 209, 0.6);
}
.table-wrap::-webkit-scrollbar-track {
  /*滚动条里面轨道样式*/
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  background: rgba(179, 179, 179, 0.1);
}
.task-scene-drawer .ivu-drawer-mask {
  z-index: 1025;
}
.task-scene-drawer .ivu-drawer-wrap {
  z-index: 1026;
}
.task-pro-modal .ivu-modal-mask {
  z-index: 1000 !important;
}
.task-pro-modal .ivu-modal-wrap {
  z-index: 1000 !important;
}
</style>

<style>
.creatProModal .ivu-modal-mask {
  z-index: 1001 !important;
}
.creatProModal .ivu-modal-wrap {
  z-index: 1001 !important;
}
</style>
